<script setup>
const props = defineProps({
  size: {
    type: [String, Number],
    default: 20
  },
  colors: {
    type: Array,
    default: () => {
      return ['#333']
    }
  },
  strokeWidth: {
    type: Number,
    default: 4
  },
  strokeLinecap: {
    type: String,
    default: 'round'
  },
  strokeLinejoin: {
    type: String,
    default: 'round'
  }
})
</script>

<template>
  <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none" class="svg-icon">
    <path
        d="M9 42C11.2091 42 13 40.2091 13 38C13 35.7909 11.2091 34 9 34C6.79086 34 5 35.7909 5 38C5 40.2091 6.79086 42 9 42Z"
        :stroke="props.colors[0]" :stroke-width="props.strokeWidth" :stroke-linejoin="props.strokeLinejoin"/>
    <path
        d="M9 14C11.2091 14 13 12.2092 13 10C13 7.79086 11.2091 6 9 6C6.79086 6 5 7.79086 5 10C5 12.2092 6.79086 14 9 14Z"
        :stroke="props.colors[0]" :stroke-width="props.strokeWidth" :stroke-linejoin="props.strokeLinejoin"/>
    <path
        d="M9 28C11.2091 28 13 26.2092 13 24C13 21.7908 11.2091 20 9 20C6.79086 20 5 21.7908 5 24C5 26.2092 6.79086 28 9 28Z"
        :stroke="props.colors[0]" :stroke-width="props.strokeWidth" :stroke-linejoin="props.strokeLinejoin"/>
    <path d="M21 24H43" :stroke="props.colors[0]" :stroke-width="props.strokeWidth"
          :stroke-linecap="props.strokeLinecap" :stroke-linejoin="props.strokeLinejoin"/>
    <path d="M21 38H43" :stroke="props.colors[0]" :stroke-width="props.strokeWidth"
          :stroke-linecap="props.strokeLinecap" :stroke-linejoin="props.strokeLinejoin"/>
    <path d="M21 10H43" :stroke="props.colors[0]" :stroke-width="props.strokeWidth"
          :stroke-linecap="props.strokeLinecap" :stroke-linejoin="props.strokeLinejoin"/>
  </svg>
</template>

<style scoped>

</style>